<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>有仓分享未加盟</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/app.css" />
    <!--App自定义的css-->
    <style>
        .mui-input-row:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0px;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #efefef;
        }
        .mui-content>div:nth-child(1){
            background: url("__PUBLIC__/images/weijiameng/people.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(2){
            background: url("__PUBLIC__/images/weijiameng/phone.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(3){
            background: url("__PUBLIC__/images/weijiameng/gudingPhone.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(4){
            background: url("__PUBLIC__/images/weijiameng/id.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .mui-content>div:nth-child(5){
            background: url("__PUBLIC__/images/weijiameng/updateId.png") no-repeat 1rem center;
            background-size: 2rem;
            padding-left: 1rem;
        }
        .imgWrap{
            width: 75%; margin: 1rem auto;
            position: relative;
            height: 12rem;
        }
        .imgWrap img{
            width: 100%;
            height: 12rem;
        }
        .switchBtn{
            background: url("__PUBLIC__/images/weijiameng/switch.png") no-repeat center;
            background-size: 1rem;
        }
        .switchBtnAfter{
            background: url("__PUBLIC__/images/weijiameng/switchBtnAfter.png") no-repeat center;
            background-size: 1rem;
        }
        /*存图片的盒子*/
        .img-div{
            border: 1px solid #ddd;
            float: left;
            line-height: 1;
            margin-left: 5px;
            overflow: hidden;
        }
        .hide{display: none}
    </style>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
    <script src="__PUBLIC__/layer_mobile/layer.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">申请加盟</h1>
    <span style="float: right;line-height: 3rem">我的仓</span>
</header>
<form onsubmit="return submits()" action="{:U('shenqQingAdd')}" method="post" enctype="multipart/form-data">
<div class="mui-content">
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">联系人</label>
            <input maxlength="10" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear"  placeholder="请输入联系人">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">联系人</label>
            <input required maxlength="10" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" id="Contact" name="Contact" placeholder="请输入联系人">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">联系电话</label>
            <input required  maxlength="11" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" id="Mobile" name="Mobile" placeholder="请输入联系电话">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">固定电话</label>
            <input  maxlength="20" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" id="Tel" name="Tel" placeholder="请输入固定电话">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">身份证号</label>
            <input required  maxlength="18" style="width: 55%;float: right;height: 3rem;text-align: right" type="text" class="mui-input-clear" name="ID" id="ID" placeholder="请输入身份证号">
        </div>
    </div>
    <div  class="mui-control-content mui-active">
        <div class="mui-input-row h50 pr">
            <i class="mui-icon-cang mui-cangchutype   mui-pull-left"></i>
            <label class="pl40">上传身份证正面照</label>
        </div>
    </div>
    <!--身份证正面-->
    <div class="imgWrap">
        <div class="img-box" id="imgboxid"></div>
        <img id="imgBtn" style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;" src="__PUBLIC__/images/weijiameng/facadeOfIDCard.png"/>
        <input  style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple"  name="ID_PIC1" id="ID_PIC1" onchange="xmTanUploadImg(this)"/>
    </div>

    <!--身份证反面-->
    <div class="imgWrap">
        <div class="img-box" id="imgboxidf"></div>
        <img id="imgBtnf" style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;" src="__PUBLIC__/images/weijiameng/identityCard.png"/>
        <input style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple" name="ID_PIC2" id="ID_PIC2"   onchange="xmTanUploadImgf(this)"/>
    </div>
    <!--手持身份证-->
    <div class="imgWrap">
        <div class="img-box" id="imgboxidc"></div>
        <img id="imgBtnc" style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;" src="__PUBLIC__/images/weijiameng/handheldIdentityCard.png"/>
        <input style="position: absolute;width: 100%;height: 12rem;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple" name="ID_PIC3" id="ID_PIC3"  onchange="xmTanUploadImgc(this)"/>
    </div>

    <div class="imgWrap" style="height: auto">
        <span id="queren" class="switchBtn" style="float: left;width: 1rem;height: 1rem;" ></span>
        <p style="float: left;margin-left: 1rem">您已同意<span style="color: #2e97f5">《百福云仓加盟协议》</span></p>
    </div>
    <div class="imgWrap" style="margin:4rem auto">
<!--        <button s>确认加盟</button>-->
        <input style="width: 100%; height: 3rem;background: #ffbf33; border-radius: 1.5rem;color: #ffffff" type="submit" value="确认加盟"/>
    </div>
</div>
</form>
<?php
    if(Cookie('ji') == 2)
    {
?>
<include file="Public/fotter" />
<?php
    }else
    {
?>
<include file="Public/fotter1" />
<?php
    }
?>
</body>
<script src="__PUBLIC__/js/mui.min.js"></script>
<script>
    //    $(function(){
    $(".switchBtn").click(function(){    //点击同意协议切换
        $(".switchBtn").toggleClass("switchBtnAfter")
    });
    //选择图片，马上预览
    function xmTanUploadImg(obj) {

        var fl=obj.files.length;
        for(var i=0;i<fl;i++){
            var file=obj.files[i];
            var reader = new FileReader();

            //ajax上传
            var fd = new FormData();
            fd.append("upload", 1);
            fd.append("upfile", file);
            $.ajax({
                url: "{:U('ajaxImg1')}",
                type: "POST",
                async : false,
                processData: false,
                contentType: false,
                data: fd,
                success: function(d) {
                    if(d.code != 200)
                    {
                        alert(code.msg)
                    }
                    else
                    {
                        url = d.url
                    }
                }
            });

            //读取文件过程方法
            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");

                var imgstr='<img url="'+url+'" style="max-width:17rem;height:12rem;margin-left: 2px" src="'+e.target.result+'"/>';
                var oimgbox=document.getElementById("imgboxid");
                var ndiv=document.createElement("div");
                var oImgBtn = document.getElementById("imgBtn");   //点击的图片

                ndiv.innerHTML=imgstr;
                ndiv.className="img-div";
                oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
                oimgbox.appendChild(ndiv);
                oImgBtn.setAttribute("class", "hide");

            }

            reader.readAsDataURL(file);
        }

    };
    function xmTanUploadImgf(obj) {

        var fl=obj.files.length;
        for(var i=0;i<fl;i++){
            var file=obj.files[i];
            var reader = new FileReader();

            //ajax上传
            var fd = new FormData();
            fd.append("upload", 2);
            fd.append("upfile", file);
            $.ajax({
                url: "{:U('ajaxImg1')}",
                type: "POST",
                async : false,
                processData: false,
                contentType: false,
                data: fd,
                success: function(d) {
                    if(d.code != 200)
                    {
                        alert(code.msg)
                    }
                    else
                    {
                        url = d.url
                    }
                }
            });
            //读取文件过程方法

            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");

                var imgstr='<img url="'+url+'" style="max-width:17rem;height:12rem;margin-left: 2px" src="'+e.target.result+'"/>';
                var oimgbox=document.getElementById("imgboxidf");
                var ndiv=document.createElement("div");
                var oImgBtn = document.getElementById("imgBtnf");   //点击的图片

                ndiv.innerHTML=imgstr;
                ndiv.className="img-div";
                oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
                oimgbox.appendChild(ndiv);
                oImgBtn.setAttribute("class", "hide");

            }

            reader.readAsDataURL(file);
        }

    };
    function xmTanUploadImgc(obj) {

        var fl=obj.files.length;
        for(var i=0;i<fl;i++){
            var file=obj.files[i];
            var reader = new FileReader();


            //ajax上传
            var fd = new FormData();
            fd.append("upload", 3);
            fd.append("upfile", file);
            $.ajax({
                url: "{:U('ajaxImg1')}",
                type: "POST",
                async : false,
                processData: false,
                contentType: false,
                data: fd,
                success: function(d) {
                    if(d.code != 200)
                    {
                        alert(code.msg)
                    }
                    else
                    {
                        url = d.url
                    }
                }
            });
            //读取文件过程方法

            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");

                var imgstr='<img url="'+url+'" style="max-width:17rem;height:12rem;margin-left: 2px" src="'+e.target.result+'"/>';
                var oimgbox=document.getElementById("imgboxidc");
                var ndiv=document.createElement("div");
                var oImgBtn = document.getElementById("imgBtnc");   //点击的图片

                ndiv.innerHTML=imgstr;
                ndiv.className="img-div";
                oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
                oimgbox.appendChild(ndiv);
                oImgBtn.setAttribute("class", "hide");

            }

            reader.readAsDataURL(file);
        }

    }
    //    })
</script>
<script>
    function submits(){
        //验证手机号
        var Mobile = $('#Mobile').val()
        var re = /^1\d{10}$/
        if (!re.test(Mobile)) {
            //信息框
            layer.open({
                content: '手机号非法,请重新输入'
                ,btn: '我知道了'
            });
            return false
        }
        //验证身份证号
        var ID = $('#ID').val()
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(reg.test(ID) === false)
        {
            //信息框
            layer.open({
                content: '身份证输入不合法'
                ,btn: '我知道了'
            });
            return false
        }
        //验证照片
        var ID_PIC1 = $('#ID_PIC1').val().length
        var ID_PIC2 = $('#ID_PIC2').val().length
        var ID_PIC3 = $('#ID_PIC3').val().length
        if(ID_PIC1 <1 || ID_PIC2<1 || ID_PIC3<1)
        {
            //信息框
            layer.open({
                content: '请上传身份证照片'
                ,btn: '我知道了'
            });
            return false
        }
        //查看是否同意
        var queren = $('#queren').attr('class')
        if(queren != 'switchBtn switchBtnAfter')
        {
            //信息框
            layer.open({
                content: '请确认协议'
                ,btn: '我知道了'
            });
            return false
        }
    }
</script>
</html>